import { Mask } from 'antd-mobile'
import React from 'react'
import styles from './index.module.less'
import closeImg from '@/resource/home/close.png'
import type { ModalPropsType } from './interface'
import HoverImage from '../HoverImg'
import btn_quxiao_n from '@/resource/auctionManage/btn_quxiao_n.png'
import btn_quxiao_s from '@/resource/auctionManage/btn_quxiao_s.png'
import btn_queren_n from '@/resource/auctionManage/btn_queren_n.png'
import btn_queren_s from '@/resource/auctionManage/btn_queren_s.png'

const CustomModal = (props: ModalPropsType) => {
    const { onClose, visible, onOk, title, content } = props

    return (
        <div className={styles.modal_container} style={{ display: visible ? 'block' : 'none' }}>
            <Mask visible />
            <div className={styles.modal_main}>
                <div className={styles.modal_header}>
                    <div className={styles.title}>{title}</div>
                </div>
                <div className={styles.modal_content_wrapper}>
                    <div className={styles.modal_content}>{content}</div>
                    <div className={styles.modal_footer}>
                        <HoverImage className={styles.cancel_btn} placeholderSrc={btn_quxiao_n} src={btn_quxiao_s} onClick={onClose} wait={500}>
                            取消
                        </HoverImage>
                        <HoverImage className={styles.statr_btn} placeholderSrc={btn_queren_n} src={btn_queren_s} onClick={onOk} wait={500}>
                            确认
                        </HoverImage>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CustomModal
